<template>
    <view class="curve">
        <scroll-view scroll-y class="pagses">
            <view class="uni-list">
                <view class="uni-list-cell">
                    <view class="uni-list-cell-db">
                        <picker @change="bindPickerChange" :value="index" :range="array">
                            <view class="uni-input">{{array[index]}}</view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="fm_top">
                <div class="fm_new">
                    <div class="fm_top_pj">
                        <div class="fm_new_li">{{historylistsr.monitorCount||'0'}}</div>
                        <div class="fm_new_li1">测试次数</div>
                    </div>
                    <div class="fm_top_pj fm_top_left">
                        <div class="fm_new_new">
                            <span class="w_span"></span>
                            正常 {{historylistsr.normalPercentage||'0.00%' }}
                            <span
                                class="new_span"
                            >{{historylistsr.normal||'0' }}次</span>
                        </div>
                        <div class="fm_new_new">
                            <span class="w_span"></span>
                            <span
                                :class="historylistsr.high?'red':''"
                            >偏高 {{historylistsr.highPercentage||'0.00%' }}</span>
                            <span class="new_span">次</span>
                            <span
                                :class="historylistsr.high?'red':''"
                                class="new_span"
                            >{{historylistsr.high||'0' }}</span>
                        </div>
                        <div class="fm_new_new">
                            <span class="w_span"></span>
                            <span
                                :class="historylistsr.low?'red':''"
                            >偏低 {{historylistsr.lowPercentage||'0.00%' }}</span>
                            <span class="new_span">次</span>
                            <span
                                :class="historylistsr.low?'red':''"
                                class="new_span"
                            >{{historylistsr.low ||'0'}}</span>
                        </div>
                    </div>
                </div>
            </view>
            <div class="cu_cantitle">
                <div class="cu_cantop">血压值(mmHg)</div>
                <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" />
                <div class="cu_cantop">平均值(mmHg)</div>
                <canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" />
            </div>
        </scroll-view>
    </view>
</template>
<script>
import uCharts from "../../components/u-charts/u-charts.js";
var that;
var canvaLineA=null;
var canvaLineB=null;
export default {
    data() {
        return {
            historylist: {},
            historylistsr: {},
            itemsList: [],
            index: 0,
            array: ["最近7天", "最近30天", "最近90天"],
            qudata: {
                monitorTypeId: "316189802716475392",
                fromType: 7,
            },
            cWidth: "",
            cHeight: "",
        };
    },
    mounted() {
        that=this;
        var _this = this;
        _this.cWidth = uni.upx2px(750);
        _this.cHeight = uni.upx2px(500);
        _this.getList();
        _this.getLists();
    },
    methods: {
        bindPickerChange(e) {
            var time = e.target.value;
            if (time == 0) {
                this.qudata.fromType = 7;
            } else if (time == 1) {
                this.qudata.fromType = 30;
            } else if (time == 2) {
                this.qudata.fromType = 90;
            }
            this.index = e.target.value;
            this.getList();
            this.getLists();
            
        },
        getList() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/monitor/getStatisticsFrom", _this.qudata)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist =  res.content;
                        _this.showLineA("canvasLineA");
                        _this.showLineB("canvasLineB");
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        getLists() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/monitor/getStatisticsFrom", _this.qudata)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylistsr =  res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        tips() {
            uni.showModal({
                title: "温馨提示提示",
                cancelText: "关闭",
                confirmText: "我知道了",
                confirmColor: "#FA4D93",
                content:
                    "血压异常时，请关注测量前3小时的用药及生活方式记录，找到原因，以后注意。",
                success(res) {
                    if (res.confirm) {
                    } else if (res.cancel) {
                    }
                },
            });
        },
        showLineA(canvasId) {
            var _this = this;
            canvaLineA = new uCharts({
                $this: that,
                canvasId: canvasId,
                type: "column",
                fontSize: 11,
                legend: { show: false },
                dataLabel: true,
                rotate: false, //横屏
                dataPointShape: true,
                dataPointShapeType: "hollow",
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: [
                    "最高高压",
                    "",
                    "最低高压",
                    "",
                    "最高低压",
                    "",
                    "最低低压",
                ],
                series: [
                    {
                        color: "#FFC4DB",
                        textColor: "#666666",
                        data: [
                            {
                                value:
                                    _this.historylist.maxSystolicPressure || 0,
                                color: _this.historylist
                                    .maxSystolicPressureIsNormal
                                    ? "#FFC4DB"
                                    : "#D7FEC5",
                            },
                            { value: "", color: "#979797" },
                            {
                                value:
                                    _this.historylist.minSystolicPressure || 0,
                                color: _this.historylist
                                    .minSystolicPressureIsNormal
                                    ? "#FFC4DB"
                                    : "#D7FEC5",
                            },
                            { value: "", color: "#979797" },
                            {
                                value:
                                    _this.historylist.maxDiastolicPressure || 0,
                                color: _this.historylist
                                    .maxDiastolicPressureIsNormal
                                    ? "#FFD97C"
                                    : "#D7FEC5",
                            },
                            { value: "", color: "#979797" },
                            {
                                value:
                                    _this.historylist.minDiastolicPressure || 0,
                                color: _this.historylist
                                    .minDiastolicPressureIsNormal
                                    ? "#FFD97C"
                                    : "#D7FEC5",
                            },
                        ],
                        format: (val) => {
                            if (val) {
                                return val.toFixed(0);
                            } else {
                                return "";
                            }
                        },
                    },
                ],
                // animation: true,
                // enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    axisLineColor: "#979797",
                    gridColor: "#979797",
                    // itemCount: 3*4*60,
                    // labelCount:2,
                    format: (val) => {
                        return val;
                    },
                },
                yAxis: {
                    gridType: "dash",
                    gridColor: "#979797",
                    dashLength: 8,
                    splitNumber: 7,
                    data: [
                        {
                            axisLineColor: "#979797",
                            gridType: "solid",
                            gridColor: "#979797",
                            min: 50,
                            max: 140,
                            format: (val) => {
                                return val.toFixed(1);
                            },
                        },
                    ],
                },
                width: _this.cWidth,
                height: _this.cHeight,
                enableMarkLine: true,
                 extra: {
                    column: {
                        type: "group",
                        meter:{
                            border:'2px'
                        },
                    },
                },
            });
        },
        showLineB(canvasId) {
            var _this = this;
            canvaLineB = new uCharts({
                $this: that,
                canvasId: canvasId,
                type: "column",
                fontSize: 11,
                legend: { show: false },
                dataLabel: true,
                rotate: false, //横屏
                dataPointShape: true,
                dataPointShapeType: "hollow",
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: [
                    "",
                    "高压均值",
                    "",
                    "低压均值",
                    "",
                    "脉率均值",
                    "",
                ],
                series: [
                    {
                        textColor: "#666666",
                        data: [
                            { value: null, color: "#979797" },
                            {
                                value:
                                    _this.historylist.systolicPressureAvg || 0,
                                color: _this.historylist
                                    .systolicPressureAvgIsNormal
                                    ? "#FFC4DB"
                                    : "#D7FEC5",
                            },
                            { value: "", color: "#979797" },
                            {
                                value:
                                    _this.historylist.diastolicPressureAvg || 0,
                                color: _this.historylist
                                    .diastolicPressureAvgIsNormal
                                    ? "#FFD97C"
                                    : "#D7FEC5",
                            },
                            { value: "", color: "#979797" },
                            {
                                value: _this.historylist.pulsePateAvg || 0,
                                color: _this.historylist.pulsePateAvgIsNormal
                                    ? "#B0F890"
                                    : "#D7FEC5",
                            },
                            { value: "", color: "#979797" },
                        ],
                        format: (val) => {
                            if (val) {
                                return val.toFixed(0);
                            } else {
                                return "";
                            }
                        },
                    },
                ],
                // animation: true,
                // enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#979797",
                    // itemCount: 3*4*60,
                    // labelCount:2,
                    format: (val) => {
                        return val;
                    },
                },
                yAxis: {
                    gridType: "dash",
                    gridColor: "#979797",
                    splitNumber: 7,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#979797",
                            gridType: "solid",
                            gridColor: "#979797",
                            min: 50,
                            max: 140,
                            format: (val) => {
                                return val;
                            },
                        },
                    ],
                },
                width: _this.cWidth,
                height: _this.cHeight,
                enableMarkLine: true,
                extra: {
                    line: {
                        width: "1px",
                        style: "straight",
                    },
                },
            });
        },
    },
};
</script>

<style scoped lang="scss">
.curve {
    height: calc(100% - 108upx);
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
    }
    .red {
        color: #fa4d93;
    }
    .pagses {
        height: 100%;
        background: #fff;
        margin-top: 20upx;
        .charts {
            width: 100%;
            height: 500upx;
        }
        .uni-input {
            margin-top: 20upx;
            background: #fff;
            text-align: right;
            position: relative;
            height: 60upx;
            line-height: 60upx;
            padding-right: 60upx;
        }
        .uni-input::after {
            content: "";
            position: absolute;
            top: 26upx;
            right: 35upx;
            width: 0;
            height: 0;
            border-right: 10upx solid transparent;
            border-left: 10upx solid transparent;
            border-top: 10upx solid #333;
        }
        .fm_top {
            .fm_top1 {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                text-align: center;
                padding: 20upx 40upx;
                .fm_top_pj {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    box-shadow: 0px 2upx 6upx 0px rgba(208, 208, 208, 0.5);
                    border-radius: 10upx;
                    border: 1px solid rgba(221, 221, 221, 1);
                    padding: 20upx;
                    .pj_l1 {
                        font-size: 40upx;
                    }
                    .pj_l2 {
                        font-size: 28upx;
                        color: #666;
                    }
                }
            }
            .fm_new {
                margin: 20upx 40upx;
                border: 1px solid rgba(221, 221, 221, 1);
                box-shadow: 0px 2upx 6upx 0px rgba(208, 208, 208, 0.5);
                border-radius: 10upx;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                text-align: center;
                padding: 20upx 0upx;
                padding-right: 40upx;
                .fm_top_pj {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    vertical-align: middle;
                    .fm_new_li {
                        font-size: 40upx;
                    }
                    .fm_new_li1 {
                        color: #666;
                    }
                    .fm_new_new {
                        font-size: 24upx;
                        .w_span {
                            display: inline-block;
                            width: 60upx;
                        }
                        .new_span {
                            float: right;
                        }
                    }
                }
                .fm_top_left {
                    border-left: 4upx solid #ddd;
                    text-align: left;
                }
            }
        }
        .cu_cantitle {
            .cu_cantop {
                color: #333;
                font-weight: 500;
                font-size: 28upx;
                font-weight: 500;
                position: relative;
                padding: 20upx 50upx;
            }
            .cu_cantop::after {
                content: "";
                position: absolute;
                left: 30upx;
                width: 8upx;
                top: 28upx;
                height: 32upx;
                background: #fa4d93;
                border-radius: 5upx;
            }
        }
    }
}
</style>